<template>
    <page-container>
        <cu-custom slot="header" bgColor="bg-white" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">金融专区</block>
        </cu-custom>
        <view slot="center">
            <view class="banner" v-if="adv.adv_position">
                <image :src="adv.adv_position.images[0]" mode="aspectFill"></image>
            </view>
            <!-- 产品列表 -->
            <view class="product">
                <view class="product_item" @click="linkProduct(item)" v-for="(item,index) in adv.adv_list" :key="index" :style="{'background':item.background}">
                    <view class="item_msg">
						<view class="msg_title">{{item.adv_title}}</view>
						<view class="msg_label">{{item.describe}}</view>
					</view>
					<view class="item_img">
						<image :src="item.adv_image" mode="aspectFill"></image>
					</view>
                </view>
            </view>
        </view>
    </page-container>
</template>

<script>
export default {
	data() {
		return {
			adv: [] // 广告接口信息
		}
	},
	onLoad() {
		this.getShopInfo()
	},
	methods: {
		// 产品跳转
		linkProduct(item) {
			console.log(item)
			if(item.adv_url !== '' && item.adv_url.wap_url !== ''){
				var productURL = {wap_url:item.adv_url.wap_url}
				this.$util.diyRedirectTo(productURL)
				console.log(productURL)
			}else if(item.details_img !== null){
				console.log(item.details_img)
				this.$util.redirectTo('/pages/member/finance/detail',{img:item.details_img})
			}else{
				uni.showToast({
					title:'该产品没有详情图片或链接',
					icon:'none'
				})
			}
		},
		// 获取金融专区广告信息
		getShopInfo() {
			this.$request.advDetail({ keyword: 'USER_FOOTER' }).then(res => {
				this.adv = res.data
				// this.adv.adv_list.map(obj => { // 转链接格式
				// 	obj.adv_url = JSON.parse(obj.adv_url)
				// })
				this.adv.adv_position.images = this.adv.adv_position.images.split(',')// 图片路径拆分
				for(var i=0;i<this.adv.adv_list.length;i++){
					if(this.adv.adv_list[i].adv_url !== ''){
						this.adv.adv_list[i].adv_url = JSON.parse(this.adv.adv_list[i].adv_url)
					}
				}
				console.log('adv',this.adv)
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
    background-color: #ffffff;
}
.banner {
    width: 702rpx;
    height: 298rpx;
    margin: 24rpx;
    border-radius: 16rpx;
    overflow: hidden;
    image {
        width: 100%;
        height: 298rpx;
    }
}
.product {
    width: 702rpx;
    margin: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    &_item {
        width: 340rpx;
		padding: 0 20rpx;
        height: 180rpx;
        margin-bottom: 20rpx;
        border-radius: 16rpx;
        overflow: hidden;
        display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #6D9CBE;
		.item_msg{
			flex: 1;
			margin-right: 8rpx;
			.msg_title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #222222;
				font-size: 26rpx;
				font-weight: bold;
			}
			.msg_label{
				text-overflow: -o-ellipsis-lastline;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  line-clamp: 2;
				  -webkit-box-orient: vertical;
				color: #999999;
				font-size: 22rpx;
			}
		}
		.item_img{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 150rpx;
				height: 150rpx;
			}
		}
    }
}
</style>
